<template>
  <PageWrap title="编辑信息">
    <nut-cell-group title="基本信息">
      <nut-cell title="昵称">
        <template #desc>
          <input
            placeholder="请输入昵称"
            type="nickname"
            :value="nickname"
            @blur="handleNicknameBlur"
          />
          <RequestStatus :status-type="nicknameStatus" />
        </template>
      </nut-cell>
      <!-- <nut-cell
        title="手机号"
        sub-title="暂不支持授权"
        desc="点击授权"
      ></nut-cell> -->
    </nut-cell-group>
    <nut-cell-group title="头像">
      <button
        class="upload-avatar-btn"
        open-type="chooseAvatar"
        @chooseavatar="onChooseAvatar"
      >
        <nut-cell title="昵称">
          <template #title>
            <nut-avatar :size="50"> <img :src="userInfo.avatar" /> </nut-avatar>
          </template>
          <template #desc>
            更换
            <request-status :status-type="avatarStatus"></request-status>
          </template>
        </nut-cell>
      </button>
    </nut-cell-group>
  </PageWrap>
</template>
<script setup lang="ts">
import { useUser } from "@/src/store/use-user.store";
import { alovaInstance } from "../../utils/alova";
import { nextTick, ref } from "vue";
import {
  RequestStatusEnum,
  useRequestStatus
} from "../../hooks/useRequestStatus";

const { setStatus: setUploadAvatarStatus, status: avatarStatus } =
  useRequestStatus();

const { setStatus: setNicknameStatus, status: nicknameStatus } =
  useRequestStatus();

const { userInfo, updateUserInfo } = useUser();

const nickname = ref(userInfo.nickname);

const onChooseAvatar = async (e) => {
  setUploadAvatarStatus(RequestStatusEnum.PENDING);
  const res = await alovaInstance
    .Post(
      "/upload",
      { type: "avatar" },
      {
        meta: {
          uploadData: {
            name: "file",
            filePath: e.detail.avatarUrl
          }
        }
      }
    )
    .catch(() => {
      setUploadAvatarStatus(RequestStatusEnum.ERROR);
    });

  // @ts-ignore
  const url = `${alovaInstance.options.baseURL}/files/download/${res.data.id}`;
  await alovaInstance.Post("/user/update", { avatar: url }).catch(() => {
    setUploadAvatarStatus(RequestStatusEnum.ERROR);
  });
  updateUserInfo("avatar", url);

  setUploadAvatarStatus(RequestStatusEnum.SUCCESS);
};

const _updateUserInfo = async (key: string, value: string) => {
  setNicknameStatus(RequestStatusEnum.PENDING);
  await alovaInstance.Post("/user/update", { [key]: value }).then(() => {
    setNicknameStatus(RequestStatusEnum.ERROR);
  });
  updateUserInfo(key, value);
  setNicknameStatus(RequestStatusEnum.SUCCESS);
};
const handleNicknameBlur = (e: FocusEvent) => {
  const newValue = e.detail.value;
  if (newValue === userInfo.nickname) return;
  nextTick(() => {
    _updateUserInfo("nickname", newValue);
    nickname.value = newValue;
  });
};
</script>

<style lang="scss">
.upload-avatar-btn {
  background-color: transparent;
  border: none;
  margin: unset;
  padding: unset;
  &::after {
    content: unset;
  }
}
</style>
